<template>
  <div v-loading="loading" class="list-detail">
    <div class="top">
      <div class="lsdl-top">
        <img :src="require('@/assets/images/iconbg-order.png')">
        <p>
          <span>退款编号：</span>
          <span>{{ detailMain.rejectedShopId }}</span>
        </p>
        <div>
          <span>退款状态：</span>
          <span
            style="min-width:112px;font-weight:600;"
          >{{ detailMain.rejectedStatus|filterRefundStatus }}</span>
          <p
            v-show="detailMain.rejectedStatus === '02000001' || detailMain.rejectedStatus === '02000002'|| detailMain.rejectedStatus === '02000012'|| detailMain.rejectedStatus === '02000011'|| detailMain.rejectedStatus === '02000009'?true:false"
            :style="`background:url(${require(&quot;@/assets/images/&quot;+data.img)}) no-repeat 0px 4px;text-indent:18px;color:#1182FB;min-width:150px;`"
          >{{ detailMain.endDate|countdown }}</p>
        </div>
        <div>
          <span>申请时间：</span>
          <p>{{ detailMain.createDate|filterDate }}</p>
        </div>
      </div>
      <div class="user-leave-info">
        <i class="el-icon-caret-top" />
        <div>
          <h4>
            <div>
              <img :src="require('@/assets/images/iconbg-flag.png')" alt>
            </div>
            <span>订单备注：</span>
          </h4>
          <div>{{ detailMain.shopRemakes }}</div>
          <el-button
            type="text"
            @click="dialogFormVisible = true;textarea=detailMain.shopRemakes"
          >修改标记</el-button>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="ltdl-main">
        <div class="simple-info">
          <h3>买家信息</h3>
          <div>
            <div>
              <span>用户昵称：</span>
              <p v-if="detailMain.buyer">{{ detailMain.buyer }}</p>
              <p v-else>{{ detailMain.buyer }}</p>
              <router-link :to="{name: 'Chat', query: {to: detailMain.phone}}"><img style="width:63px;height:20px;cursor:pointer;" :src="require('@/assets/images/icon-btn-callme.png')" alt></router-link>
            </div>
            <div>
              <span>用户ID：</span>
              <p>{{ detailMain.createUser }}</p>
            </div>
            <div>
              <span>联系电话</span>
              <p>{{ detailMain.phone|phoneChange }}</p>
            </div>
          </div>
        </div>
        <div class="order-info">
          <h3>退款信息</h3>
          <div>
            <div class="order-refund-info">
              <div>
                <div>
                  <span>退款金额：</span>
                  <p>
                    <span
                      style="color:#E9433A;font-size:16px;"
                    >{{ detailMain.applyAmount?(detailMain.applyAmount/100).toFixed(2):'0.00' }}</span>&emsp;元
                  </p>
                </div>
                <div>
                  <span>退款类型：</span>
                  <p>{{ detailMain.takeover === "0"?"仅退款":"退货退款" }}</p>
                </div>
              </div>
              <div>
                <span>退款原因：</span>
                <p>{{ detailMain.rejectedCause }}</p>
              </div>
              <div>
                <span>退款描述：</span>
                <p>{{ detailMain.rejectedRemark }}</p>
              </div>
            </div>
            <table width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
              <thead>
                <tr>
                  <th style="text-align:left;text-indent:20px;">商品</th>
                  <th style="text-indent:20px;text-align:left;">商品名称</th>
                  <th style="text-align:left;text-indent:20px;">单价</th>
                  <th style="width:84px;">数量</th>
                  <th style="min-width:84px;">订单编号</th>
                  <th>商品总价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,i) in detailMain.orderMdse" :key="i">
                  <td class="table-list-img">
                    <div>
                      <el-image
                        style="width: 80px; height: 80px"
                        :src="qnPath(item.image)"
                        fit="scale-down"
                      >
                        <div slot="error" class="image-slot">
                          <img style="min-width: 80px;max-width:80px; height: 80px" :src="require('../../../../assets/images/background-upload-false.png')" alt="">
                        </div>
                      </el-image>
                    </div>
                  </td>
                  <td class="table-list-name">
                    <div>
                      <div>{{ item.name }}</div>
                      <div style="color:#838A9D;">规格：{{ item.propertyValueName }}</div>
                    </div>
                  </td>
                  <td>
                    <div style="font-weight:600;">{{ item.unitPrice|fixedPrice }}</div>
                  </td>
                  <td style="text-align:center;text-indent:0;">
                    <div>{{ item.buyNum }}</div>
                  </td>
                  <td style="text-align:center;text-indent:0;">
                    <div>
                      <div style="color:#1182FB;font-weight:600;">{{ item.orderShopId }}</div>
                    </div>
                  </td>
                  <td style="text-align:center;text-indent:0;">
                    <div style="font-weight:600;">{{ (item.buyNum * item.unitPrice)|fixedPrice }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="operate-history">
          <h3>操作历史</h3>
          <div v-for="(item,i) in history" :key="i">
            <div class="history-date" style="color:#A8ABB8;text-align:left;">
              <div>{{ item.date|getDateHistory }}</div>
              <div>{{ item.date|getTimeHistory }}</div>
            </div>
            <div class="history-title">{{ item.title }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <router-link to="/order/list">返回</router-link>
      <el-button
        v-if="detailMain.rejectedStatus === '02000001' || detailMain.rejectedStatus === '02000002'|| detailMain.rejectedStatus === '02000012'|| detailMain.rejectedStatus === '02000009' || detailMain.rejectedStatus === '02000011'? true :false"
        type="text"
        @click="dialogFormVisibleRefuse = true"
      >拒绝申请</el-button>
      <a v-if="detailMain.rejectedStatus === '02000003' || detailMain.rejectedStatus === '02000004'|| detailMain.rejectedStatus === '02000005' ? false :true" @click="agreeThing()">同意申请</a>
    </div>
    <!-- 遮罩层 -->
    <!-- 备注 -->
    <el-dialog title="修改备注" :visible.sync="dialogFormVisible">
      <div class="detail-change-remark">
        <div>备注内容：</div>
        <div class="detail-content">
          <el-input
            v-model="textarea"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 200}"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="remarksAdd()">确认添加</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 拒绝申请 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisibleRefuse" class="refuse-popup">
      <el-form ref="refusePopupInfo" :model="refusePopupInfo" :rules="rules">
        <el-form-item label="拒绝原因：" prop="account">
          <el-select v-model="refusePopupInfo.account" placeholder="请选择拒绝原因">
            <!-- detailMain.takeover === "0"?"仅退款":"退货退款" -->
            <!--
              refuseReason1: [ // 未收到货 仅退款
              refuseReason2: [ // 已收到货 仅退款
              refuseReason2: [ // 1步拒绝（退款退货）
              refuseReason3: [ // 2步拒绝（收到货物发现货物不对而拒绝） 退款退货
            -->
            <template v-if="detailMain.takeover === '0'">
              <template
                v-if=" detailMain.rejectedStatus === '02000009'||detailMain.rejectedStatus === '02000011'"
              >
                <el-option
                  v-for="(item,i) in refuseReason1"
                  :key="i"
                  :label="item.value"
                  :value="item.value"
                />
              </template>
              <template v-else>
                <el-option
                  v-for="(item,i) in refuseReason2"
                  :key="i+100"
                  :label="item.value"
                  :value="item.value"
                />
              </template>
            </template>
            <template v-else>
              <template
                v-if="detailMain.rejectedStatus === '02000009'||detailMain.rejectedStatus === '02000011'"
              >
                <el-option
                  v-for="(item,i) in refuseReason3"
                  v-show="true"
                  :key="i+100"
                  :label="item.value"
                  :value="item.value"
                />
              </template>
              <template>
                <el-option
                  v-for="(item,i) in refuseReason2"
                  v-show="true"
                  :key="i+1000"
                  :label="item.value"
                  :value="item.value"
                />
              </template>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="拒绝说明：" prop="desc" label-width="90">
          <el-input
            v-model="refusePopupInfo.desc"
            type="textarea"
            placeholder="请输入拒绝说明"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 5, maxRows: 200}"
          />
        </el-form-item>
        <el-form-item label="上传凭证：" label-width="80px">
          <el-upload
            :limit="3"
            :action="qiniuUploadUrl"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :before-remove="handleRemove"
            :before-upload="beforeUpload"
            :data="qiniuData"
            :on-success="handleSuccess"
          >
            <i class="el-icon-plus" style="margin-top:10px;" />
            <div style="color:#838A9D;">上传凭条</div>
            <div style="color:#838A9D;">(最多三张)</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" class="avatar" alt>
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="!(imageFlag)"
          @click="submitRefuse('refusePopupInfo')"
        >拒绝申请</el-button>
        <el-button @click="dialogFormVisibleRefuse = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const pinyin = require('chinese-to-pinyin');
import { getDate, getTime } from '@/utils/date';
import { getOrderRejectedbyid, updateOrderRejected } from '@/api/order';
import { mapGetters } from 'vuex';
import { testPicType, testPicSize } from '@/utils/img';
import { getToken, deleteQnImg } from '@/api/qiniu';
export default {
  filters: {
    getDateHistory: function(value) {
      const date = new Date(value);
      return getDate(date);
    },
    getTimeHistory: function(value) {
      const date = new Date(value);
      return getTime(date, true);
    },
    countdown: value => {
      const momentTime = new Date();
      const nowtime = (momentTime.getTime() - 1000) / 1000; // 当前时间 毫秒数
      const totalSeconds = value / 1000 - nowtime;
      const day = parseInt(totalSeconds / 3600 / 24); // 天
      let hour = parseInt((totalSeconds / 3600) % 24); // 时
      let minute = parseInt((totalSeconds / 60) % 60); // 分
      // let second = parseInt(totalSeconds % 60); // 秒
      let residueTime = '还剩' + day + '天 ' + hour + '时 ' + minute + '分 ';
      hour = addZeroPrefix(hour);
      minute = addZeroPrefix(minute);
      if (totalSeconds < 0) {
        residueTime = '时间到';
        clearInterval(window.timeId); // 清除定时器
        window.timeId = null;
      }
      function addZeroPrefix(number) {
        return number < 10 ? `0${number}` : number;
      }
      return residueTime;
    },
    filterDate: function(value) {
      const date = new Date(value);
      return getDate(date) + ' ' + getTime(date);
    },
    // 过滤售后退款的退款状态
    filterRefundStatus: function(value) {
      switch (value) {
        case '02000001':
          return '等待卖家处理';
        case '02000002':
          return '等待卖家处理';
        case '02000012':
          return '等待卖家处理';
        case '02000011':
          return '等待买家发货';
        case '02000003':
          return '已退款';
        case '02000009':
          return '等待商家收货';
        case '02000004':
          return '已退款';
        case '02000005':
          return '已退款';
        case '02000007':
          return '已拒绝';
        case '02000008':
          return '已取消';
        case '02000010':
          return '已拒绝';
        case '02000006':
          return '已拒绝';
        default:
          return '未知情况';
      }
    }
  },
  data() {
    return {
      detailMain: {},
      qiniuData: {
        token: '',
        key: ''
      },
      data: {
        goodsNumber: 'BC256854123654',
        goodsState: '等待商家处理',
        endTime: '6天23时59分',
        shelfTime: '2020-02-03 12:32:15',
        orderRemark: '该订单买家急需！需要准时发货！该订单需要准时发货！',
        userMessage:
          '请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！请在发货的时候把材料拍照给我，谢谢！',
        img: 'icon-goods-sell.png'
      },
      userInfo: {
        name: '小路dew',
        id: '23523524662',
        phone: '17825****98',
        takeUser: '章小胖',
        takePlace: '四川省成都市高新区天府五街美年广场',
        sendName: '德邦物流',
        sendId: '788123619817812',
        sendTime: '2020-01-20 12:33:10'
      },
      refundInfo: {
        money: 500.0,
        type: '仅退款',
        account: '商家一直不发货',
        desc:
          '我双11的时候就下单了！结果现在都是双12了，都还没有给我发货！我双11的时候就下单了！结果现在都是双12了，都还没有给我发货！我双11的时候就下单了！结果现在都是双12了，都还没有给我发货！'
      },
      active: 2,
      history: [
        { date: 1582870142419, title: '张小平 提交订单' },
        { date: 1582860142319, title: '张小平通过微信支付预付款￥200.00' },
        { date: 1582850142219, title: '张小平通过微信支付预付款￥200.00' },
        { date: 1582840142119, title: '张小平通过微信支付预付款￥200.00' }
      ],
      billInfo: { name: '河北骏途工程技术有限公司', id: 'CDX23523524662' },
      floatMoney: { endMoney: 800.0, freight: 90.0 },
      orderInfoList: [
        {
          img: 'test.jpg',
          name:
            '专业生产盆式橡胶支座 抗震盆式桥梁支座GPZ(KZ)LQZ球形支座阿斯顿发是否是否撒飞',
          param: 'D80',
          price: 200.0,
          number: 5,
          allPrice: 1000.0,
          state: 'BC12452626315'
        }
      ],
      // 遮罩层开关
      dialogFormVisible: false,
      textarea: '',
      // 拒绝申请开关
      dialogFormVisibleRefuse: false,
      refusePopupInfo: {
        account: '',
        desc: ''
      },
      // 上传凭证
      dialogImageUrl: '',
      dialogVisible: false,
      imageSendData: '',
      // 验证
      rules: {
        account: [
          { required: true, message: '请选择拒绝原因', trigger: 'change' }
        ],
        desc: [{ required: true, message: '请输入拒绝说明', trigger: 'change' }]
      },
      imgUploadNumber: 0,
      imageFlag: true,
      refuseReason1: [
        // 未收到货 仅退款
        {
          value: '商品退回后才能退款'
        },
        {
          value: '申请时间已超售后服务时限'
        },
        {
          value: '退款金额不对，买家要求过高'
        },
        {
          value: '其他'
        }
      ],
      refuseReason2: [
        // 已收到货 仅退款   1步拒绝（退款退货）
        {
          value: '商品已经影响二次销售'
        },
        {
          value: '商品没问题，买家未举证'
        },
        {
          value: '商品没问题，买家举证无效'
        },
        {
          value: '要求买家承担发货运费'
        }
      ],
      refuseReason3: [
        // 2步拒绝（收到货物发现货物不对而拒绝） 退款退货
        {
          value: '商品发出时完好'
        },
        {
          value: '买家已签收'
        },
        {
          value: '商品退回后才能退款'
        },
        {
          value: '已发货，请承担发货运费'
        },
        {
          value: '已与买家协商一致'
        }
      ],
      loading: false,
      // 倒计时到了
      timeEnd: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo']),
    ...mapGetters(['qiniuUploadUrl', 'qiniuResUrl'])
  },
  created() {
    this.getDetail();
    this.getTimeList();
  },
  beforeDestroy() {
    // 组件的销毁
    clearInterval(window.timeId); // 清除定时器
    window.timeId = null;
  },
  methods: {
    handleRemove(file, fileList) {
      this.imgUploadNumber--;
      document.getElementsByClassName(
        'el-upload--picture-card'
      )[0].style.display = 'inline-block';
      const param = {
        path: file.response.key
      };
      new Promise((resolve, reject) => {
        deleteQnImg(param).then(res => {
          if (res.code === '0000') {
            const image = this.imageSendData.split(',');
            for (let i = 0; i < image.length; i++) {
              if (image[i] === file.response.key) {
                image.splice(i, 1);
              }
            }
            this.imageSendData = image.join(',');
            resolve(res);
          } else {
            reject(res);
          }
        }).catch(error => {
          reject(error);
        });
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 点击拒绝申请
    submitRefuse(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const param = {
            rejectedStatus: '02000006',
            refuseReason: this.refusePopupInfo.account, // 说明
            refuseCause: this.refusePopupInfo.desc, // 原因
            refuseReasonImage: this.imageSendData,
            rejectedShopId: this.detailMain.rejectedShopId,
            shopId: this.shopInfo.id
          };
          updateOrderRejected(param).then(res => {
            if (res.code === '0000') {
              this.$message({
                message: '拒绝申请成功',
                type: 'success'
              });
              this.$router.push('/order/after_sale');
            } else {
              this.$message({
                message: '拒绝申请失败',
                type: 'error'
              });
            }
          });

          this.dialogFormVisibleRefuse = false;
        } else {
          return false;
        }
      });
    },
    // 点击同意申请
    agreeThing() {
      //  to="/order/list"
      this.$confirm('确认同意申请？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消'
      }).then(() => {
        let param = {};
        if (
          this.detailMain.rejectedStatus === '02000001' ||
          this.detailMain.rejectedStatus === '02000002' ||
          this.detailMain.rejectedStatus === '02000012'
        ) {
          param = {
            shopId: this.shopInfo.id,
            rejectedStatus: '02000011',
            rejectedShopId: this.detailMain.rejectedShopId
          };
        } else {
          param = {
            shopId: this.shopInfo.id,
            rejectedStatus: '02000003',
            rejectedShopId: this.detailMain.rejectedShopId
          };
        }
        updateOrderRejected(param).then(res => {
          if (res.code === '0000') {
            this.$message({
              message: '拒绝申请成功',
              type: 'success'
            });
            this.$router.push('/order/after_sale');
          } else {
            this.$message({
              message: '拒绝申请失败',
              type: 'error'
            });
          }
        });
      });
    },
    getDetail() {
      this.loading = true;
      const id = sessionStorage.getItem('afterSaleDetail');
      getOrderRejectedbyid({ id }).then(res => {
        this.detailMain = res.data.orderrejecteds;
        this.history = res.data.operation;
        this.loading = false;
      });
    },
    async beforeUpload(file) {
      this.imgUploadNumber++;
      this.imageFlag = false;
      if (this.imgUploadNumber >= 3) {
        document.getElementsByClassName(
          'el-upload--picture-card'
        )[0].style.display = 'none';
      }
      if (!testPicType(file) || !testPicSize(file, 3072, '图片')) {
        return;
      }
      const res = await getToken();
      this.qiniuData.token = res.data;
      this.qiniuData.key = `${file.uid}-${pinyin(file.name, {
        keepRest: true,
        firstCharacter: true,
        removeSpace: true
      })}`;
    },
    handleSuccess(res, file) {
      this.imageFlag = true;
      this.imageSendData = this.imageSendData.split(',');
      this.imageSendData.push(`${res.key}`);
      if (this.imageSendData[0] === '') {
        this.imageSendData.shift();
      }
      this.imageSendData = this.imageSendData.join(',');
    },
    // 倒计时
    getTimeList() {
      window.timeId = setInterval(() => {
        this.detailMain.endDate = parseFloat(this.detailMain.endDate) - 0.001;
      }, 1000);
    },
    // 添加备注
    remarksAdd() {
      // {"rejectedStatus":"修改订单状态","refuseReason":"拒绝原因","shopRemakes":"备注","refuseReasonImage":"图片","rejectedShopId":","shopId":"店铺id"}
      const param = {
        shopRemakes: this.textarea,
        shopId: this.shopInfo.id,
        rejectedShopId: this.detailMain.rejectedShopId
      };
      updateOrderRejected(param).then(res => {
        if (res.code === '0000') {
          this.$message.success('修改备注成功！');
        } else {
          this.$message.error('修改备注失败！');
        }
        this.dialogFormVisible = false;
        this.getDetail();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  padding: 0;
  margin: 0;
}
.list-detail {
  $bordercolor: #e9e9e9;
  width: 100%;
  font-size: 14px;
  background: #f1f5f9;
  color: #3c4353;
  margin-bottom: 10px;
  & > .top {
    padding: 36px 12%;
    background: #fff;
    margin-bottom: 10px;
    .lsdl-top {
      margin-bottom: 17px;
      display: flex;
      flex-flow: row nowrap;
      & > p {
        margin: 0 4% 0 1%;
        font-size: 18px;
        font-weight: 600;
        color: rgba(60, 67, 83, 1);
        display: flex;
        flex-flow: row nowrap;
        height: 25px;
        line-height: 25px;
        min-width: 250px;
      }
      img {
        width: 28px;
        height: 28px;
      }
      & > div {
        padding-right: 2%;
        padding-left: 2%;
        border-right: 1px solid $bordercolor;
        line-height: 25px;
        display: flex;
        flex-flow: row nowrap;
        height: 25px;
        span {
          min-width: 70px;
          display: inline-block;
        }
        &:last-child {
          border: none;
        }
        & > p {
          min-width: 138px;
        }
      }
    }
    .user-leave-info {
      background: #fef7eb;
      border: 1px solid #fac28a;
      padding: 0px 40px 0px 24px;
      max-width: 1070px;
      & > div {
        display: flex;
        margin-bottom: 15px;
        & > h4 {
          padding: 0;
          margin: 0;
          display: flex;
          min-width: 100px;
          line-height: 22px;
          div {
            width: 18px;
            height: 20px;
            margin-right: 8px;
          }
        }
        & > div {
          line-height: 22px;
        }
        & > .el-button {
          min-width: 56px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(24, 144, 255, 1);
          line-height: 22px;
          margin-left: 11px;
          padding: 0;
        }
      }
      .el-icon-caret-top {
        position: relative;
        top: -11px;
        left: 10px;
      }
      .el-icon-caret-top:before {
        color: #fac28a;
      }
    }
  }
  .main {
    .ltdl-main {
      padding: 0 11%;
      background-color: #fff;
      margin-bottom: 20px;
      & > div {
        padding-bottom: 30px;
        padding-left: 50px;
        border-bottom: 1px solid #e4e9ef;
        h3 {
          margin: 0;
          padding-top: 30px;
          padding-bottom: 20px;
          text-indent: 11px;
          background: url("../../../../assets/images/iconbg-nav.png") no-repeat
            0 32px;
          background-size: 5px 12px;
        }
        & > div {
          margin-bottom: 20px;
          font-weight: 400;
          text-align: left;
          text-indent: 11px;
          padding: 10px 15% 0 2%;
        }
      }
      .simple-info {
        & > div {
          display: flex;
          justify-content: space-between;
          padding-right: 14%;
          & > div {
            display: flex;
            align-items: center;
            img {
              margin-left: 5px;
              cursor: pointer;
            }
          }
        }
      }
      .order-info {
        & > div {
          display: flex;
          flex-flow: column nowrap;
          padding-right: 5%;
          .order-refund-info {
            display: flex;
            flex-flow: column nowrap;
            padding-left: 10px;
            & > div {
              display: flex;
              margin-bottom: 18px;
              line-height: 22px;
              & > div {
                display: flex;
                &:nth-child(2) {
                  margin-left: 25%;
                }
              }
              span {
                min-width: 70px;
                text-indent: 0;
              }
              p {
                text-indent: 0;
                font-weight: 600;
                width: 100%;
                padding-right: 10px;
              }
            }
          }
          table {
            margin-top: 10px;
            thead {
              background-color: #f9fbfc;

              height: 50px;
              line-height: 50px;
              th {
                border-top: 1px solid #e4e9ef;
                border-bottom: 1px solid #e4e9ef;
                text-align: center;
                &:first-child {
                  border-left: 1px solid #e4e9ef;
                }
                &:last-child {
                  border-right: 1px solid #e4e9ef;
                }
              }
            }
            tbody {
              td {
                border: 1px solid #e4e9ef;
                border-top: none;
                border-right: none;
                text-indent: 0;
                &:last-child {
                  border-right: 1px solid #e4e9ef;
                }
                &:nth-child(2) {
                  border-left: none;
                }
                & > div {
                  min-height: 120px;
                  line-height: 22px;
                  padding: 20px;
                  box-sizing: border-box;
                }
              }
              .table-list-name {
                width: 340px;
                div {
                  width: 257px;
                  text-indent: 0;
                  line-height: 22px;
                }
              }
            }
          }
        }
      }
      .operate-history {
        & > div {
          display: flex;
        }
      }
    }
  }
  .footer {
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 16px 0 13px 0;
    width: 100%;
    a:nth-child(1) {
      display: inline-block;
      width: 104px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(217, 217, 217, 1);
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      margin-right: 20px;
      font-size: 14px;
      color: #3c4353;
    }
    .el-button {
      width: 104px;
      height: 40px;
      font-size: 14px;
      color: #1890ff;
      font-weight: 400;
      border-radius: 5px;
      text-align: center;
      margin-right: 20px;
      border: 1px solid rgba(17, 130, 251, 1);
    }
    a{
      width: 104px;
      height: 40px;
      background: rgba(17, 130, 251, 1);
      font-size: 14px;
      color: rgba(255, 255, 255, 1);
      font-weight: 400;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
    }
  }
  //遮罩层
  /deep/.el-dialog {
    width: 600px;
  }
  /deep/.el-dialog__header {
    border-bottom: 1px solid #eeeeee;
    font-weight: 600;
  }
  /deep/.el-dialog__body {
    padding: 32px 0 0 70px !important;
  }
  /deep/.el-dialog__footer {
    text-align: left;
    padding: 0 0 50px 140px;
  }
}
.detail-change-remark {
  display: flex;
  .detail-content {
    width: 400px;
    height: 150px;
  }
  .el-input {
    width: 400px;
    height: 150px;
  }
}
.refuse-popup {
  .el-form-item {
    /deep/.el-form-item__label {
      color: #838a9d;
      font-weight: 400;
      padding-right: 0;
    }
    .el-select {
      width: 300px;
    }
    /deep/.el-textarea__inner {
      width: 391px;
      margin-right: 0;
    }
    /deep/.el-input__inner {
      height: 36px;
    }
    /deep/.el-input__count {
      left: 341px;
      width: 40px;
    }
    /deep/.el-form-item__content {
      display: inline-block;
      margin-left: 0 !important;
    }
    //图片
    /deep/.el-upload--picture-card {
      width: 78px;
      height: 78px;
      line-height: 20px;
      font-size: 12px;
      .el-icon-plus {
        color: #1182fb;
        font-size: 16px;
      }
    }
    /deep/.el-upload-list__item {
      width: 78px;
      height: 78px;
    }
  }
}
</style>
